<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
  <script src='../lib/bootstrap-3.3.5-dist/js/jquery-3.6.0.js'></script>
  <script src='../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js'></script>
  <script src='../javascript/data.js'></script>
  <title>登录</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #win {
      width: 100%;
      height: 100%;
      background-image: url('../image/login.png');
      background-size: cover;
      position: relative;
    }

    #login {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(255, 255, 255, 0.9);
      width: 450px;
      height: 500px;
      border-radius: 10px;
      padding: 50px;
    }

    #login>div:first-child {
      width: 100%;
    }

    #login>div:first-child>img {
      border-radius: 50px;
      margin: auto;
      display: block;
    }

    #login>p:nth-child(2) {
      width: 100%;
      color: rgb(64, 158, 255);
      font-size: 20px;
      text-align: center;
      margin: 20px 0;
    }

    #login>div:nth-child(3),
    #login>div:nth-child(4) {
      width: 100%;
      margin: 10px 0;
    }

    .shuru {
      width: 100%;
      border: 1px solid rgb(238, 238, 238);
      height: 50px;
    }

    .shuru:hover {
      border-color: rgb(83, 168, 255);
    }

    .shuru::-webkit-input-placeholder {
      color: rgb(204, 204, 204);
    }

    #login>div:nth-child(5) {
      width: 100%;
    }

    #loginbut {
      width: 100%;
      height: 50px;
      background-color: rgb(83, 168, 255);
      border: none;
      color: white;
    }
  </style>
</head>

<body>
  <div id='win'>
    <div id='login'>
      <div>
        <img src="../image/logo1.png" alt="">
      </div>
      <p>图书馆管理系统</p>
      <div>
        <input class="shuru" type="text" placeholder="请输入用户名称">
      </div>
      <div>
        <input class="shuru" type="password" placeholder="请输入登录密码">
      </div>
      <div>
        <button id='loginbut'>登录</button>
      </div>
    </div>
  </div>
  <script>
    //将数据源存入session
    if (sessionStorage.getItem('initialData') == null) {
      let allData = JSON.stringify(bookData)
      sessionStorage.setItem('initialData', allData)
    }
    let username = ['husk', 'yaojp', 'wangyc', 'caimx']
    let password = ['123456', '456789', 'qwerty', 'asdfgh']
    //页面高度默认为浏览器高度
    let h = $(window).height()
    $('#win').css({
      'height': h + 'px',
    })
    //登录校验
    $('#loginbut').on('click', userLogin)
    document.onkeydown = function (e) {
      if (e.keyCode == 13) {
        userLogin()
      }
    }
    function userLogin() {
      let i
      for (i = 0; i < username.length; i++) {
        if (username[i] == $('.shuru').eq(0).val() && password[i] == $('.shuru').eq(1).val()) {
          location.href = './hsgl.html'
          sessionStorage.setItem('page', 'page1')
          sessionStorage.setItem('username', username[i])
          sessionStorage.setItem('loginStatus', true)
          break
        }
      }
      if (i == username.length) {
        alert('账户或密码错误')
      }
    }
  </script>
</body>

</html>